<template>
  <div class="login-container">
    <el-form :model="user" :rules="rules1" ref="ruleForm1" label-position="left" label-width="0px"
             class="demo-ruleForm login-page" >
      <h3 class="title">广告位管理系统·找回密码</h3>
      <el-form-item prop="account">
        <el-input type="text" v-model="user.account" auto-complete="off" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input type="text" v-model="user.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item style="width:100%; text-align: right">
        <el-button type="primary" style="width:100%;" @click="checkUser('ruleForm1')" :loading="logining">
          找回密码
        </el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="密码修改" :visible.sync="dialogFormVisible" width="25%" center>
      <el-form :model="user" :rules="rules2" label-position="left" ref="changePasswordForm">
        <el-form-item prop="password">
          <el-input v-model="user.password" type="password" style="width: 100%;" autocomplete="off" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input v-model="user.rePassword" type="password"  style="width: 100%;" autocomplete="off" placeholder="请确认新密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width:50%;"  @click="submitForm('changePasswordForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import userApi from '@/api/personal/user'
export default {
  name: 'findPassword',
  data () {
    // 密码验证
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    // 手机号验证
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
        // 所以在前面加了一个+实现隐式转换
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    return {
      user: {
        accountId: '', // 用户编号
        account: '', // 用户账号
        phone: '', // 用户电话号码
        password: '', // 密码
        rePassword: '' // 确认的密码
      },
      rules1: { // 表单验证规则
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ]
      },
      rules2: {
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ],
        rePassword: [
          {validator: validatePass, trigger: 'blur'}
        ]
      },
      checked: true,
      dialogFormVisible: false, // 修改密码表单弹窗显示初始化为隐藏
      formLabelWidth: '120px' // 设置表单标签长度
    }
  },
  methods: {
    /**
     * 找回密码按钮点击事件， 通过传user对象给api来判断用户是否存在，
     * 如果存在则弹出修改密码表单弹窗，否则给出错误提醒
     * @param formName 表单名字
     */
    checkUser (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userApi.findUser(this.user).then(res => {
            if (res.data.isExist) {
              this.dialogFormVisible = true
              this.user.accountId = res.data.userId
            } else {
              this.$message({
                type: 'error',
                message: '请检查用户名及手机号码是否正确'
              })
            }
          })
        } else {
          this.$message({
            type: 'error',
            message: '请按正确格式填写'
          })
        }
      })
    },
    /**
     * 修改密码表单按钮提交点击事件，将user对象作为参数传给api来实现数据的修改，修改成功后跳转到登录界面
     * @param formName 表单名字
     */
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userApi.changePassword(this.user).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.$refs[formName].resetFields()
            this.$router.push('/login')
          })
        } else {
          this.$message({
            type: 'error',
            message: '修改失败'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .login-container {
    width: 100%;
    height: 100%;
  }

  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 20px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

</style>
